import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './Welcome.scss';
import LayoutView, { LayoutMode } from '../layout';
import { Checkbox, RiskCheckButton, AboutButton, Scroll } from '../common-ui-parts';
import TextScroll from './text';

import imgTitle from './images/imgTitle.png';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { checked: props.checked };
  }

  handleChecked(name, isInputChecked) {
    this.setState({ checked: isInputChecked });
  }

  render() {
    return (
      <LayoutView
        mode={LayoutMode.TOP}
        title="导入画面"
      >
        <div className="Welcome">
          <div className="checkTitle">
            <img src={imgTitle} alt="" />
          </div>
          <div className="rules">
            {/*     规则文章     */}
            <TextScroll/>
          </div>
          <div className="checkStart">
            <div>
              <Checkbox
                name="agree"
                label="利用規約に同意し、利用を開始する"
                checked={this.state.checked}
                propagate={this.handleChecked.bind(this)}
              />
            </div>
            <div className="notice">
               <p>※血圧、血糖、血中脂質（コレステロール、中性脂肪）等の数値を覚えて</p>
            
               <p className="subNotice">いない方は、健康診断の結果をお手元にご用意頂くことを推奨します。</p>
            </div>
            <div>
              <RiskCheckButton disabled={!this.state.checked} onTouchTap={this.props.onAction} />
            </div>
          </div>
          <div className="about">
            <AboutButton />
          </div>
        </div>
      </LayoutView>
    );
  }
}

Welcome.propTypes = {
  onAction: PropTypes.func,
  onAgree: PropTypes.func,
  checked: PropTypes.bool,
}

Welcome.defaultProps = {
  onAction: () => {},
  onAgree: () => {},
  checked: false,
}

export default Welcome
